/*
 * @Descripttion: your project
 * @Author: Liujiaqing
 * @Date: 2022-02-10 14:43
 * @LastEditors: Liujiaqing
 * @LastEditTime: 2022-02-10 14:43
 */
import { Button, Col, Form, Input, Row, Select } from 'antd';
import React from 'react';
import '../style.less';
import RightRegisterSuccess from './right-register-success';
import RightWriteInfo from './right-write-info';
interface IRightRegisterProps {
    onChangeStatus: (status: string) => void;
}
const RightRegister = (props: IRightRegisterProps) => {
    const { onChangeStatus } = props;
    const [option, setOption] = React.useState('register');
    const [mobileNum, setMobileNum] = React.useState('+86');
    const [form] = Form.useForm();
    React.useEffect(() => {
        console.log(form);
        form.setFieldsValue({
            mobile: '',
            password: '',
        });
    }, []);
    const onChangeMobileNum = React.useCallback((value: string) => {
        setMobileNum(value);
    }, []);

    const onClickSubmit = React.useCallback(() => {
        // form.submit();
        onChangeOption('writeInfo');
    }, []);
    const onChangeOption = React.useCallback((value: string) => {
        setOption(value);
    }, []);
    const onFinish = React.useCallback(() => {
        const loginForm: any = { ...form.getFieldValue([]) };
        loginForm.mobile = mobileNum + loginForm.mobile;
        console.log(loginForm);
    }, [form, mobileNum]);
    const selectBefore = React.useMemo(() => {
        return (
            <Select value={mobileNum} className="select-before" onChange={onChangeMobileNum}>
                <Select.Option value="+86">+86</Select.Option>
                <Select.Option value="+87">+87</Select.Option>
            </Select>
        );
    }, [mobileNum]);
    const returnHtml = React.useMemo(() => {
        if (option === 'register') {
            return (
                <div className="right-content-container">
                    <div className="content-title">注册</div>
                    <Form form={form} wrapperCol={{ span: 14, offset: 0 }} layout={'vertical'} onFinish={onFinish} style={{ marginTop: '24px' }}>
                        <Form.Item
                            label="手机号："
                            name="mobile"
                            rules={[
                                { required: true, message: '手机号不能为空' },
                                {
                                    pattern: /^1[3|4|5|7|8｜9][0-9]\d{8}$/,
                                    message: '请输入正确的手机号',
                                },
                            ]}
                        >
                            <Input addonBefore={selectBefore} placeholder="11位手机号" />
                        </Form.Item>
                        <div className="content-flex" style={{ width: '58.3%' }}>
                            <Form.Item
                                label="手机验证码："
                                name="password"
                                style={{ width: '100%' }}
                                rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空',
                                    },
                                ]}
                                wrapperCol={{ span: 22, offset: 0 }}
                            >
                                <Input placeholder="输入验证码" style={{ width: 'calc(100 % -124px)' }} />
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" size="middle" className="content-btn code " onClick={onClickSubmit}>
                                    发送验证码
                                </Button>
                            </Form.Item>
                        </div>

                        <Form.Item name="code" label="邀请码：">
                            <Input placeholder="请输入邀请码" />
                        </Form.Item>
                        <Row align="bottom">
                            <Col span={10}>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit" size="middle" className="content-btn" onClick={onClickSubmit}>
                                        注册
                                    </Button>
                                </Form.Item>
                            </Col>
                            <Col span={3} offset={1}>
                                <Form.Item wrapperCol={{ span: 24, offset: 0 }}></Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </div>
            );
        } else if (option === 'writeInfo') {
            return <RightWriteInfo onChangeOption={onChangeOption}></RightWriteInfo>;
        } else {
            return <RightRegisterSuccess onChangeStatus={onChangeStatus}></RightRegisterSuccess>;
        }
    }, [option]);
    return <>{returnHtml}</>;
};
export default RightRegister;
